<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <title>黑马头条</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="../../../plugins/vant/index.css">
    <!-- 页面样式 -->
    <link rel="stylesheet" href="../../../plugins/css/index.css">
</head>

<body>
<div id="app">
    <div class="article">
        <script>
                        var _authorApUserId= 4
        </script>
        <div style="display:none;">4</div>
            <van-row>
                <van-col span="24" class="article-title" >35岁梅西生涯首次倒钩!方天画戟 空中画弧门将呆看</van-col>
            </van-row>

            <van-row type="flex" align="center" class="article-header">
                <van-col span="3">
                    <van-image round class="article-avatar" src="https://p3.pstatp.com/thumb/1480/7186611868"></van-image>
                </van-col>
                <van-col span="16">
                    <div>admin</div>
                    <div>2022-8-7 16:47:54</div>

                </van-col>
                <van-col span="5">
                    <van-button round :icon="relation.isfollow ? '' : 'plus'" type="info" class="article-focus"
                                :text="relation.isfollow ? '取消关注' : '关注'" :loading="followLoading" @click="handleClickArticleFollow">
                    </van-button>
                </van-col>
            </van-row>
        <van-row class="article-content">
                        <van-col span="24" class="article-text">网易体育8月7日报道：</van-col>
                        <van-col span="24" class="article-text">在新赛季的前两场比赛中，梅西体现出了非常出色的竞技状态。在法国超级杯中，梅西为巴黎首开纪录。在法甲首轮中，梅西又贡献了2射1传。梅西的第二个进球，还是个极为精彩的倒挂金钩。对于35岁的梅西而言，这是他职业生涯第一次倒勾破门。作为足球史上最伟大的全能攻击手之一，梅西在今夜填补上了生涯一大空白。</van-col>
                        <van-col span="24" class="article-text">相关阅读：</van-col>
                        <van-col span="24" class="article-text">梅西倒钩 巴黎官方发文配山羊:阿根廷人历史第1</van-col>
                        <van-col span="24" class="article-text">历史第3!梅西总进球达772 追平罗马里奥!少C罗43个</van-col>
                        <van-col span="24" class="article-text">"互相"喂饼!内马尔有门不射就等大哥 梅西笑到起褶</van-col>
                        <van-col span="24" class="article-text">10分！客场球迷集体膜拜高呼"梅西" 对手官推：世界最佳</van-col>
                        <van-col span="24" class="article-text">梅西罕见倒钩！苏醒：熬了这么多年 居然熬到见证倒钩了 值了</van-col>
                        <van-col span="24" class="article-text">这个进球，出现在第86分钟时，两名阿根廷人诠释了何为心有灵犀一点通。在中场，帕雷德斯突然送出了一次挑传。在皮球落点前，只有迅速前插的梅西。在小禁区前，梅西背身胸部停球之后，顺势飞身而起左脚倒挂金钩。</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text">梅西这次倒勾射门起跳高度并不算高，但射门部位却吃得非常准。梅西踢出了一记罕见的倒勾吊射，皮球恰好在越过门将头顶后开始下坠，并慢悠悠地飞入球门远角。梅西坐在地上露出微笑，内马尔冲了过来双手拉起老大哥。梅西进了倒勾，内马尔似乎比他更开心。</van-col>
                        <van-col span="24" class="article-text">这个进球，是梅西职业生涯第772个进球。在足坛历史射手榜上，梅西已经追平了排名第三的罗马里奥。排在梅西之前的，只有805球的比坎和815球的C罗。梅西落后比坎33球，以阿根廷人的状态和年龄，他超越比坎完全不是问题。梅西能否超越C罗，很大程度上将取决于他和C罗最终的退役时间。</van-col>
                        <van-col span="24" class="article-text">梅西的倒勾破门，使得C罗姐姐艾尔玛在社交网络上成了被群嘲的对象。在梅西今年生日第二天，艾尔玛在社交网络上发了梅西倒勾失败和C罗倒勾破门的对比图，她显然在借此贬低阿根廷人。艾尔玛在梅西生日后的这一举动，也实在令人感到莫名其妙。也许要感谢艾尔玛的“攒人品”，梅西在法甲首轮中就轰入了个人生涯第一个倒挂金钩。现在，艾尔玛还笑得出来吗？</van-col>
                        <van-col span="24" class="article-text">作者：张琳</van-col>
                        <van-col span="24" class="article-text"></van-col>
                        <van-col span="24" class="article-text"></van-col>
        </van-row>

        <van-row type="flex" justify="center" class="article-action">
            <van-col>
                <van-button round :icon="relation.islike ? 'good-job' : 'good-job-o'" class="article-like"
                            :loading="likeLoading" :text="relation.islike ? '取消赞' : '点赞'" @click="handleClickArticleLike"></van-button>
                <van-button round :icon="relation.isunlike ? 'delete' : 'delete-o'" class="article-unlike"
                            :loading="unlikeLoading" @click="handleClickArticleUnlike">不喜欢</van-button>
            </van-col>
        </van-row>

        <!-- 文章评论列表 -->
        <van-list v-model="commentsLoading" :finished="commentsFinished" finished-text="没有更多了"
                  @load="onLoadArticleComments">
            <van-row id="#comment-view" type="flex" class="article-comment" v-for="(item, index) in comments" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                        <van-col span="3">
                            <van-button round size="normal" v-html="item.reply" @click="showCommentRepliesPopup(item.id)">回复 {{
                                item.reply || '' }}
                            </van-button>
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <van-row>
            <van-col span="24" >
                <van-button round size="normal" @click="loadMoreComments">
                    查看更多
                </van-button>
            </van-col>
        </van-row>
    </div>
    <!-- 文章底部栏 -->
    <van-row type="flex" justify="space-around" align="center" class="article-bottom-bar">
        <van-col span="13">
            <van-field v-model="commentValue" placeholder="写评论">
                <template #button>
                    <van-button icon="back-top" @click="handleSaveComment"></van-button>
                </template>
            </van-field>
        </van-col>
        <van-col span="3">
            <van-button icon="comment-o" @click="handleScrollIntoCommentView"></van-button>
        </van-col>
        <van-col span="3">
            <van-button :icon="relation.iscollection ? 'star' : 'star-o'" :loading="collectionLoading"
                        @click="handleClickArticleCollection"></van-button>
        </van-col>
        <van-col span="3">
            <van-button icon="share-o"></van-button>
        </van-col>
    </van-row>

    <!-- 评论Popup 弹出层 -->
    <van-popup v-model="showPopup" closeable position="bottom"
               :style="{ width: '750px', height: '60%', left: '50%', 'margin-left': '-375px' }">
        <!-- 评论回复列表 -->
        <van-list v-model="commentRepliesLoading" :finished="commentRepliesFinished" finished-text="没有更多了"
                  @load="onLoadCommentReplies">
            <van-row id="#comment-reply-view" type="flex" class="article-comment-reply"
                     v-for="(item, index) in commentReplies" :key="index">
                <van-col span="3">
                    <van-image round src="https://p3.pstatp.com/thumb/1480/7186611868" class="article-avatar"></van-image>
                </van-col>
                <van-col span="21">
                    <van-row type="flex" align="center" justify="space-between">
                        <van-col class="comment-author" v-html="item.authorName"></van-col>
                        <van-col>
                            <van-button round :icon="item.operation === 0 ? 'good-job' : 'good-job-o'" size="normal"
                                        @click="handleClickCommentReplyLike(item)">{{ item.likes || '' }}
                            </van-button>
                        </van-col>
                    </van-row>

                    <van-row>
                        <van-col class="comment-content" v-html="item.content"></van-col>
                    </van-row>
                    <van-row type="flex" align="center">
                        <!-- TODO: js计算时间差 -->
                        <van-col span="10" class="comment-time">
                            {{ item.createdTime | timestampToDateTime }}
                        </van-col>
                    </van-row>
                </van-col>
            </van-row>
        </van-list>
        <!-- 评论回复底部栏 -->
        <van-row type="flex" justify="space-around" align="center" class="comment-reply-bottom-bar">
            <van-col span="13">
                <van-field v-model="commentReplyValue" placeholder="写评论">
                    <template #button>
                        <van-button icon="back-top" @click="handleSaveCommentReply"></van-button>
                    </template>
                </van-field>
            </van-col>
            <van-col span="3">
                <van-button icon="comment-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="star-o"></van-button>
            </van-col>
            <van-col span="3">
                <van-button icon="share-o"></van-button>
            </van-col>
        </van-row>
    </van-popup>
</div>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="../../../plugins/js/vue.min.js">
</script>
<script src="../../../plugins/js/vant.min.js"></script>
<!-- 引入 Axios 的 JS 文件 -->
<script src="../../../plugins/js/axios.min.js"></script>
<!-- 页面逻辑 -->
<script src="../../../plugins/js/index.js"></script>
</body>
</html>
